<template>
  <div style="width: 100%;">
    <div id="gongQuShuiChart" style="width:100%;height:5.5rem;"></div>
  </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";
export default {
  data() {
    return {
      chart: null
    };
  },
  mixins: [echartMixins],
 mounted() {
	 setTimeout(()=>{
		 this.changData()
	 },200)
 },
 methods: {
 	  async changData(){
 		var _this=this;
 		let result = await _this.$http.get("api/bi/selectBILJLLYL.do?beforeDays=10");
      if(result  &&  result.status===200){
        result.data.title.forEach((item,index)=>{
          if(result.data.QSL[item]<=0 || result.data.YSL[item]<=0){
            if(result.data.QSL[item]<=0 ){
              result.data.QSL[item]= -1*result.data.QSL[item]
            }
            if(result.data.YSL[item]<=0){
              result.data.YSL[item]= -1*result.data.YSL[item]
            }
            // rateData.push(0.01)
          }

        })
        this.draw(result.data)
      }
 	  },
    draw(data) {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("gongQuShuiChart"));
      //  ----------------------------------------------------------------
      let gsDatas = [],
			qsDatas = [],
       rateData = [],
       lslData = [],
	   legendData=['取水','供水','漏损率'];
      let maxlsl = 0;
		data.title.forEach((item,index)=>{
			gsDatas.push( data.YSL[item] )
			qsDatas.push(data.QSL[item])
      let i = Number((data.QSL[item] - data.YSL[item]) * 100 / data.QSL[item]).toFixed(2)
      lslData.push(i)
		})

    rateData.push(
				{
				  name: '漏损率',
				  type: "line",
				  smooth: true,
				  showAllSymbol: true,
				  symbol: "emptyCircle",
				  symbolSize: 8,
				  yAxisIndex: 1,
				  itemStyle: {
				    normal: {
				      color:index?'#FAC858':"#F02FC2"
				    }
				  },
				  data: lslData
				},
			)
		// data.YL.forEach((item,index)=>{
		// 	legendData.push(item.name)
		// 	let nums=[]
		// 	item.datas.forEach(it=>{
		// 		nums.push(Number(it.value).toFixed(3))
		// 	})
		// 	rateData.push(
		// 		{
		// 		  name: item.name,
		// 		  type: "line",
		// 		  smooth: true,
		// 		  showAllSymbol: true,
		// 		  symbol: "emptyCircle",
		// 		  symbolSize: 8,
		// 		  yAxisIndex: 1,
		// 		  itemStyle: {
		// 		    normal: {
		// 		      color:index?'#FAC858':"#F02FC2"
		// 		    }
		// 		  },
		// 		  data: nums
		// 		},
		// 	)
		// })
      let option = {
        title: {
          text: "",
          x: "center",
          y: 0,
          textStyle: {
            color: "#B4B4B4",
            fontSize: 16,
            fontWeight: "normal"
          }
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(255,255,255,0.1)",
          textStyle: { // 提示框浮层的文本样式。
              color: '#fff',
          },
          axisPointer: {
            type: "shadow",
            label: {
              show: false,
              backgroundColor: "#7B7DDC"
            }
          }
        },
        legend: {
          data:legendData,
          textStyle: {
            color: "#B4B4B4"
          },
          top: "0%"
        },
        grid: {
          x: "9%",
          width: "82%",
          y: "4%"
        },
        xAxis: {
          data: data.title,
          axisLine: {
            lineStyle: {
              color: "#B4B4B4"
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: [
          {
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4"
              }
            },

            axisLabel: {
              formatter: "{value} "
            }
          },
          {
            splitLine: { show: false },
            min: -5,
            max:18,
            axisLine: {
              lineStyle: {
                color: "#B4B4B4"
              }
            },
            axisLabel: {
              formatter: data=>{
                  return data+'%'
              }
            }
          }
        ],
        series: [
          ...rateData,
          {
            name: "取水",
            type: "bar",
            barWidth: 15,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#956FD4" },
                  { offset: 1, color: "#3EACE5" }
                ])
              }
            },
            data: qsDatas
          },

          {
            name: "供水",
            type: "bar",
            // barGap: "-100%",
            barWidth: 15,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(156,107,211,0.8)" },
                  { offset: 0.2, color: "rgba(156,107,211,0.5)" },
                  { offset: 1, color: "rgba(156,107,211,0.2)" }
                ])
              }
            },
            z: -12,

            data: gsDatas
          }
        ]
      };
      for (let i = 0; i < lslData.length; i++) {
        let item = Number(lslData[i]) ;
        if (maxlsl < item) {
          maxlsl = item;
        }
      }
      option.yAxis[1].max= 9>maxlsl?9:maxlsl;
      this.chart.setOption(option);
    }
  },
  destroyed() {
    window.onresize = null;
  }
};
</script>

<style lang="scss" scoped></style>
